<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>淘宝首屏项目</title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" />
	<link rel="stylesheet" href="./css/reset.css">
	<link rel="stylesheet" href="./css/position.css">
	<link rel="stylesheet" href="./css/site-nav-top.css">
	<link rel="stylesheet" href="./css/header.css">
	<link rel="stylesheet" href="./css/mainnav.css">
	<link rel="stylesheet" href="./css/navmenu.css">
	<link rel="stylesheet" href="./css/lifestudy.css">
</head>
<body>

	<!-- position start -->
	<div class="site-position">
		<i class="icon-wangwang"></i>
		<div class="site-position-inner">
			<a href="#" class="position-block active">
				爱逛<br/> 好货
			</a>
			<a href="#" class="position-block pink">
				好店<br/> 直播
			</a>
			<a href="#" class="position-block purple">
				品质<br/> 特色
			</a>
			<a href="#" class="position-block green">
				实惠<br/> 热卖
			</a>
			<a href="#" class="position-block tb-red">
				猜你<br/> 喜欢
			</a>
			<a href="#" class="position-block" style="line-height: 30px;">
				<span>反馈</span>
			</a>
			<a href="#" class="position-block">
				暴恐<br/> 举报
			</a>
		</div>
	</div>
	<!-- position end -->

	<!-- nav-top start -->
	<div class="site-nav-top">
		<div class="layer site-nav-bd">
			<ul class="site-nav-bd-l clearfix">
				<li class="site-nav-menu site-nav-border">
					<div class="site-nav-menu-hd">
						<a href="#" class="deep">中国大陆</a>
						<span class="fa fa-angle-down"></span>
					</div>
				</li>
				<li class="site-nav-menu">
					<div class="site-nav-menu-hd">
						<a href="#" class="rd">亲，请登录</a>
						<a href="#">免费注册</a>
					</div>
				</li>
				<li class="site-nav-menu">
					<div class="site-nav-menu-hd">
						<a href="#">手机逛淘宝</a>
					</div>
				</li>
			</ul>
			<ul class="site-nav-bd-r clearfix">
				<li class="site-nav-menu  site-nav-border">
					<div class="site-nav-menu-hd">
						<a href="#">我的淘宝</a>
						<span class="fa fa-angle-down"></span>
					</div>
				</li>
				<li class="site-nav-menu  site-nav-border">
					<div class="site-nav-menu-hd">
						<a href="#">
							<span class="fa fa-shopping-cart rd"></span>
							购物车
						</a>
						<span class="fa fa-angle-down"></span>
					</div>
				</li>
				<li class="site-nav-menu  site-nav-border">
					<div class="site-nav-menu-hd">
						<a href="#">
							<span class="fa fa-star"></span>
							收藏夹
						</a>
						<span class="fa fa-angle-down"></span>
					</div>
				</li>
				<li class="site-nav-menu">
					<div class="site-nav-menu-hd">
						<a href="#">商品分类</a>
					</div>
				</li>
				<li class="site-nav-pipe">|</li>
				<li class="site-nav-menu  site-nav-border">
					<div class="site-nav-menu-hd">
						<a href="#">卖家中心</a>
						<span class="fa fa-angle-down"></span>
					</div>
				</li>
				<li class="site-nav-menu  site-nav-border">
					<div class="site-nav-menu-hd">
						<a href="#">联系客服</a>
						<span class="fa fa-angle-down"></span>
					</div>
				</li>
				<li class="site-nav-menu  site-nav-border">
					<div class="site-nav-menu-hd">
						<a href="#">
							<span class="fa fa-bars rd"></span>
							网站导航
						</a>
						<span class="fa fa-angle-down"></span>
					</div>
				</li>
			</ul>
		</div>
	</div>
	<!-- nav-top end -->

	<!-- header start -->
	<div class="header">
		<div class="layer header-bd">
			<div class="header-wrap clearfix">
				<div class="header-logo">
					<h1>
						<a href="#" class="logo-bd">淘宝网</a>
					</h1>
				</div>
				<div class="header-search">
					<div class="search-tab">
						<ul class="tab-list">
							<li class="tab-item active">宝贝</li>
							<li class="tab-item">天猫</li>
							<li class="tab-item">店铺</li>
						</ul>
					</div>
					<div class="search-panal">
						<div class="input-wrap">
							<i class="fa fa-search"></i>
							<i class="fa fa-camera"></i>
							<input type="text" class="search-input" placeholder="沙拉神器">
						</div>
						<div class="button-wrap">
							<button>搜索</button>
						</div>
					</div>
					<div class="search-ft">
						<a href="#" class="ft-link rd">夹克</a>
						<a href="#" class="ft-link">时尚连衣裙</a>
						<a href="#" class="ft-link rd">衬衫</a>
						<a href="#" class="ft-link">妈妈装</a>
						<a href="#" class="ft-link">新款男鞋</a>
						<a href="#" class="ft-link rd">新款裤子</a>
						<a href="#" class="ft-link">阔腿裤</a>
						<a href="#" class="ft-link">时尚休闲裤</a>
						<a href="#" class="ft-link">双肩包</a>
						<a href="#" class="ft-link">沙发</a>
						<a href="#" class="ft-link">定制窗帘</a>
						<a href="#" class="ft-link">蚊帐</a>
						<a href=""  class="ft-link fr">
							更多
							<i class="fa fa-angle-right"></i>
						</a>
					</div>
				</div>
				<div class="header-qr">
					<div class="close-btn">
						<i class="fa fa-times"></i>
					</div>
					<a href="#" class="qr-bd">
						<span>手机淘宝</span>
						<img src="./img/qr.png" alt="">
					</a>
				</div>
			</div>
		</div>
	</div>
	<!-- header end -->

	<!-- main nav start -->
	<div class="main-nav">
		<div class="layer main-nav-bd clearfix">
			<h2>主题市场</h2>
			<ul class="nav-list main-nav-list">
				<li class="nav-item">
					<a href="#" class="nav-link">天猫</a>
				</li>
				<li class="nav-item">
					<a href="#" class="nav-link">聚划算</a>
				</li>
				<li class="nav-item">
					<a href="#" class="nav-link">天猫超市</a>
				</li>
			</ul>
			<ul class="nav-list">
				<li class="nav-pipe">|</li>
				<li class="nav-item">
					<a href="#" class="nav-link">淘抢购</a>
				</li>
				<li class="nav-item">
					<a href="#" class="nav-link">电器城</a>
				</li>
				<li class="nav-item">
					<a href="#" class="nav-link">司法拍卖</a>
				</li>
				<li class="nav-item">
					<a href="#" class="nav-link">中国质造</a>
				</li>
				<li class="nav-item">
					<a href="#" class="nav-link">兴农扶贫</a>
				</li>
			</ul>
			<ul class="nav-list">
				<li class="nav-pipe">|</li>
				<li class="nav-item">
					<a href="#" class="nav-link">飞猪旅行</a>
				</li>
				<li class="nav-item">
					<a href="#" class="nav-link">只能生活</a>
				</li>
				<li class="nav-item">
					<a href="#" class="nav-link">苏宁易购</a>
				</li>
			</ul>
		</div>
	</div>
	<!-- main nav end -->

	<!-- main-show start -->
	<div class="layer main-show clearfix">
		<!-- main-show-left start -->
		<div class="main-show-wrap">
			<!-- main-show-left-top start -->
			<div class="main-show-t clearfix">
				<!-- nav-menu start -->
				<div class="nav-menu">
					<ul class="menu-list">
						<li class="menu-item">
							<a href="" class="menu-link">女装</a> /
							<a href="" class="menu-link">男装</a> /
							<a href="" class="menu-link">内衣</a>
							<i class="fa fa-angle-right"></i>
						</li>
						<li class="menu-item">
							<a href="" class="menu-link">鞋靴</a> /
							<a href="" class="menu-link">箱包</a> /
							<a href="" class="menu-link">配件</a>
							<i class="fa fa-angle-right"></i>
						</li>
						<li class="menu-item">
							<a href="" class="menu-link">童装玩具</a> /
							<a href="" class="menu-link">孕装</a> /
							<a href="" class="menu-link">用品</a>
							<i class="fa fa-angle-right"></i>
						</li>
						<li class="menu-item">
							<a href="" class="menu-link">家电</a> /
							<a href="" class="menu-link">数码</a> /
							<a href="" class="menu-link">手机</a>
							<i class="fa fa-angle-right"></i>
						</li>
						<li class="menu-item">
							<a href="" class="menu-link">美妆</a> /
							<a href="" class="menu-link">洗护</a> /
							<a href="" class="menu-link">保健品</a>
							<i class="fa fa-angle-right"></i>
						</li>
						<li class="menu-item">
							<a href="" class="menu-link">珠宝</a> /
							<a href="" class="menu-link">眼镜</a> /
							<a href="" class="menu-link">手表</a>
							<i class="fa fa-angle-right"></i>
						</li>
						<li class="menu-item">
							<a href="" class="menu-link">运动</a> /
							<a href="" class="menu-link">户外</a> /
							<a href="" class="menu-link">乐器</a>
							<i class="fa fa-angle-right"></i>
						</li>
						<li class="menu-item">
							<a href="" class="menu-link">游戏</a> /
							<a href="" class="menu-link">动漫</a> /
							<a href="" class="menu-link">影视</a>
							<i class="fa fa-angle-right"></i>
						</li>
						<li class="menu-item">
							<a href="" class="menu-link">美食</a> /
							<a href="" class="menu-link">生鲜</a> /
							<a href="" class="menu-link">零食</a>
							<i class="fa fa-angle-right"></i>
						</li>
						<li class="menu-item">
							<a href="" class="menu-link">鲜花</a> /
							<a href="" class="menu-link">宠物</a> /
							<a href="" class="menu-link">农资</a>
							<i class="fa fa-angle-right"></i>
						</li>
						<li class="menu-item">
							<a href="" class="menu-link">房产</a> /
							<a href="" class="menu-link">装修</a> /
							<a href="" class="menu-link">建材</a>
							<i class="fa fa-angle-right"></i>
						</li>
						<li class="menu-item">
							<a href="" class="menu-link">家具</a> /
							<a href="" class="menu-link">家饰</a> /
							<a href="" class="menu-link">家纺</a>
							<i class="fa fa-angle-right"></i>
						</li>
						<li class="menu-item">
							<a href="" class="menu-link">汽车</a> /
							<a href="" class="menu-link">二手车</a> /
							<a href="" class="menu-link">用品</a>
							<i class="fa fa-angle-right"></i>
						</li>
						<li class="menu-item">
							<a href="" class="menu-link">办公</a> /
							<a href="" class="menu-link">DIY</a> /
							<a href="" class="menu-link">五金电子</a>
							<i class="fa fa-angle-right"></i>
						</li>
						<li class="menu-item">
							<a href="" class="menu-link">百货</a> /
							<a href="" class="menu-link">餐厨</a> /
							<a href="" class="menu-link">家庭保健</a>
							<i class="fa fa-angle-right"></i>
						</li>
						<li class="menu-item">
							<a href="" class="menu-link">学习</a> /
							<a href="" class="menu-link">卡券</a> /
							<a href="" class="menu-link">本地服务</a>
							<i class="fa fa-angle-right"></i>
						</li>
					</ul>
				</div>
				<!-- nav-menu end -->
				<!-- sliders start -->
				<div class="sliders">
					<div class="main-slider">

					</div>
					<div class="goods-slider">

					</div>
				</div>
				<!-- sliders end -->
				<!-- 今日热卖 start -->
				<div class="hot-sales">
					<div class="today-focus">

					</div>
					<div class="today-hot">

					</div>
				</div>
				<!-- 今日热卖 end -->
			</div>
			<!-- main-show-left-top end -->
			<!-- main-show-left-bottom start -->
			<div class="tb-headline">

			</div>
			<!-- main-show-left-bottom end -->
		</div>
		<!-- main-show-left end -->

		<!-- main-show-right start -->
		<div class="funcs-wrap">

		</div>
		<!-- main-show-right end -->
	</div>
	<!-- main-show end -->

	<!-- life-study start -->
	<div class="layer life-study">
		<h3 class="life-study-title">
			<a href="#" class="title-img">
				生活研究所
			</a>
			<p class="sub-title">发现属于你的生活方式</p>
		</h3>
		<ul class="goods-list clearfix">
			<!-- 
				1190 
			 -->
			<li class="goods-item">
				<a href="#">
					<div class="goods-img">
						<img src="./img/life_study/1.webp" alt="">
					</div>
					<div class="goods-info">
						<h4 class="main-title">趣玩先锋</h4>
						<p class="sub-title">怪有意思的</p>
						<p class="other-info">
							<i class="fa fa-heart"></i>
							人气390979
						</p>
					</div>
				</a>
			</li>
			<li class="goods-item">
				<a href="#">
					<div class="goods-img">
						<img src="./img/life_study/2.webp" alt="">
					</div>
					<div class="goods-info">
						<h4 class="main-title">火锅爱好者</h4>
						<p class="sub-title">无火锅不英雄</p>
						<p class="other-info">
							<i class="fa fa-heart"></i>
							人气26499
						</p>
					</div>
				</a>
			</li>
			<li class="goods-item">
				<a href="#">
					<div class="goods-img">
						<img src="./img/life_study/3.webp" alt="">
					</div>
					<div class="goods-info">
						<h4 class="main-title">轻微萌物癖</h4>
						<p class="sub-title">非萌货慎入</p>
						<p class="other-info">
							<i class="fa fa-heart"></i>
							人气917295
						</p>
					</div>
				</a>
			</li>
			<li class="goods-item">
				<a href="#">
					<div class="goods-img">
						<img src="./img/life_study/4.webp" alt="">
					</div>
					<div class="goods-info">
						<h4 class="main-title">雅致居家控</h4>
						<p class="sub-title">过我要的生活</p>
						<p class="other-info">
							<i class="fa fa-heart"></i>
							人气257794
						</p>
					</div>
				</a>
			</li>
			<li class="goods-item">
				<a href="#">
					<div class="goods-img">
						<img src="./img/life_study/5.webp" alt="">
					</div>
					<div class="goods-info">
						<h4 class="main-title">家有萌娃</h4>
						<p class="sub-title">宝贝快快长大</p>
						<p class="other-info">
							<i class="fa fa-heart"></i>
							人气2080136
						</p>
					</div>
				</a>
			</li>
			<li class="goods-item">
				<a href="#">
					<div class="goods-img">
						<img src="./img/life_study/6.webp" alt="">
					</div>
					<div class="goods-info">
						<h4 class="main-title">租房一族</h4>
						<p class="sub-title">生活不是租的</p>
						<p class="other-info">
							<i class="fa fa-heart"></i>
							人气1557565
						</p>
					</div>
				</a>
			</li>
		</ul>
	</div>
	<!-- life-study end -->
</body>
</html>










